<template>
  <div class="about">
    <div>
      <el-row>
        <el-col :span="2">
          <el-button @click="add">添加</el-button>
        </el-col>
        <el-col :span="16">
          &nbsp;
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="18">
              <el-input v-model="params.name" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="2">
              &nbsp;
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="xz">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="专业id" width="180">
          </el-table-column>
          <el-table-column prop="name" label="专业名" width="180">
          </el-table-column>
          <el-table-column prop="departmentName" label="系名">
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <!-- scope.row  就是  item -->
              <el-button type="success" size="mini" @click="edit(scope.row.id)">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination @current-change="currentChange" style="margin-top: 20px; text-align: center;" background
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="120px" ref="form">
        <el-form-item label="专业名" prop="name" :rules="[{ required: true, message: '请填写专业名', trigger: 'blur' }]">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="系" prop="departmentId" :rules="[{ required: true, message: '请选择系', trigger: 'blur' }]">
          <el-select v-model="form.departmentId" placeholder="请选择系">
            <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { departmentNames, majorList, majorCount, majorAdd, majorDetail, majorEdit } from "@/api"
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        id: -1,
        name: '',
        departmentId: ""
      },
      departments: [],
      params: {
        name: "",
        departmentName: "",
      },
      total: 0,
      page: 1
    }
  },
  methods: {
    xz() {
      this.getMajorList()
      this.page = 1
      this.getMajorCount()
    },
    // 添加
    add() {
      this.dialogFormVisible = true
    },
    // 编辑
    edit(id) {
      console.log(id);
      majorDetail(id).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.form = res.data;
          this.dialogFormVisible = true
        }
      })
    },
    // 处理 （添加、修改） 
    handleAdd() {
      this.$refs["form"].validate(f => {
        if (f) {
          console.log("调用接口", this.form);

          if (this.form.id == -1) {
            // 添加
            majorAdd(this.form).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "添加成功",
                  type: "success"
                })
                this.getMajorList()
                this.dialogFormVisible = false
              }
            })
          } else {
            // 编辑
            majorEdit(this.form).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "编辑成功",
                  type: "success"
                })
                this.getMajorList()
                this.dialogFormVisible = false
              }
            })
          }

        }
      })
    },
    // 系的列表
    getDepartmentNames() {
      departmentNames().then(res => {
        console.log(res);
        if (res.code === 0) {
          this.departments = res.data
        }
      })
    },

    // 专业列表
    getMajorList() {
      majorList(this.params, this.page).then(res => {
        // console.log(res);
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },
    // 专业 页数
    getMajorCount() {
      majorCount(this.params).then(res => {
        if (res.code === 0) {
          this.total = res.data * 10
        }
      })
    },
    // 翻页
    currentChange(v) {
      this.page = v;
      this.getMajorList()
    }
  },
  mounted() {
    this.getDepartmentNames()
    this.getMajorList()
    this.getMajorCount()
  }
}
</script>
